<template>
  <div>
    <el-select
      placeholder="请选择"
      class="mr20"
      style="width: 170px"
      @change="changeMatchOption"
      v-model="modelValue.matchOption"
    >
      <el-option
        v-for="option in itemObject.matchOptions"
        :key="option.value"
        :label="option.displayValue"
        :value="option.value"
      ></el-option>
    </el-select>
    <template v-if="props.itemObject.inputType !== 'date'">
      <template v-for="(item, idx) in modelValue.value" :key="idx">
        <el-input
          class="mr20"
          v-model="modelValue.value[idx]"
          style="width: 220px"
          placeholder="请输入"
          clearable
        ></el-input>
      </template>
    </template>
    <template v-else>
      <template v-for="(item, idx) in modelValue.value" :key="idx">
        <el-date-picker
          v-model="modelValue.value[idx]"
          type="date"
          placeholder="选择日期"
          style="width: 220px"
          class="mr20"
          value-format="YYYY-MM-DD"
        />
      </template>
    </template>
  </div>
</template>

<script setup>
import { defineProps, watch } from "vue";

const props = defineProps({
  itemObject: {
    type: Object,
  },
});

let modelValue = ref({});
watch(
  () => props.itemObject,
  (newVal) => {
    modelValue.value = {
      fieldName: newVal.fieldName,
      inputType: newVal.inputType,
      matchOption: "",
      value: [],
    };
  },
  {
    immediate: true,
    deep: true,
  }
);
const emit = defineEmits(["update:modelValue"]);
watch(
  modelValue,
  (newVal) => {
    emit("update:modelValue", newVal);
  },
  {
    deep: true,
    
  }
);

const changeMatchOption = (value) => {
  let index = props.itemObject.matchOptions.findIndex(
    (item) => item.value === value
  );
  if (index > -1) {
    modelValue.value.value = new Array(
      props.itemObject.matchOptions[index].inputBoxCount
    ).fill("");
  }
};
</script>
